/* components */
import { 
  BaseSelectUserSelectPanelContainer, 
  BaseSelectUserSelectPanelLeft, 
  BaseSelectUserDepartmentLeft,
  BaseSelectUserDepartmentRight,
  BaseSelectUserSelectPanelRight
} from '@src/component/common/BaseSelectUser/components'
/* enum */
import { 
  BaseSelectUserComponentNameEnum,
  SelectUserComponentDepartment 
} from '@src/component/common/BaseSelectUser/model'
/* hooks */
import {  } from '@src/component/common/BaseSelectUser/hooks'
/* store */
import { useBaseSelectUserStoreDepartmentData } from '@src/component/common/BaseSelectUser/store'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, computed, defineComponent, PropType } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'
/* util */
import { isEmpty, isFalse } from '@src/util/type'
import { findComponentDownward } from '@src/util/assist'
import Log from '@src/util/log'

export type DepartmentTabProps = {
  isMulti: boolean;
}

export interface DepartmentTabSetupState {
  // 部门列表
  departmentList: SelectUserComponentDepartment[];
}

export enum DepartmentTabEmitEventNameEnum {
  Input = 'input',
}

export type DepartmentTabInstance = ComponentInstance & DepartmentTabSetupState
export type DepartmentTabVM = ComponentRenderProxy<DepartmentTabProps> & CommonComponentInstance & DepartmentTabInstance

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserDepartmentTab,
  emits: [],
  props: {
    /* 是否为多选状态 */
    isMulti: {
      type: Boolean as PropType<boolean>,
      default: false
    }
  },
  setup(props: DepartmentTabProps, { emit }) {
    
    const { departmentRootDeleteList } = useBaseSelectUserStoreDepartmentData()
    
    const isDepartmentRootDeleteListEmpty = computed(() => {
      return isEmpty(departmentRootDeleteList.value)
    })
    
    return {
      isDepartmentRootDeleteListEmpty
    }
    
  },
  methods: {
    /** 
    * @description 获取属性列表
    */
    getAttributes() {
      return {
        directives: [
          {
            name: 'loading',
            value: this.departmentLoading && isFalse(this.tabLoading)
          }
        ]
      }
    },
    onLoadDepartmentUserListHandler() {
      
      const baseSelectUserInfiniteScrollUserComponent = findComponentDownward(this, BaseSelectUserComponentNameEnum.BaseSelectUserInfiniteScrollUser)
      
      try {
        baseSelectUserInfiniteScrollUserComponent.$el.scrollTop = 0
      } catch (error) {
        Log.error(error, this.onLoadDepartmentUserListHandler.name)
      }
      
    }
  },
  render(h: CreateElement) {
    
    const attrs = this.getAttributes()
    const classNames = [
      BaseSelectUserComponentNameEnum.BaseSelectUserDepartmentTab,
      this.isDepartmentRootDeleteListEmpty ? 'base-select-user-department-tab-un-delete' : ''
    ]
    
    return (
      <div class={classNames} {...attrs}>
        <BaseSelectUserSelectPanelContainer>
          
          <BaseSelectUserSelectPanelLeft>
            <BaseSelectUserDepartmentLeft 
              is-multi={this.isMulti} 
              onLoadUser={this.onLoadDepartmentUserListHandler}
            />
          </BaseSelectUserSelectPanelLeft>
          
          <BaseSelectUserSelectPanelRight>
            <BaseSelectUserDepartmentRight is-multi={this.isMulti} />
          </BaseSelectUserSelectPanelRight>
          
        </BaseSelectUserSelectPanelContainer>
      </div>
    )
  }
})
